<template>
	<div class="container">
		<!-- ：model	绑定对象                 ref  设置的名称-->
		<el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" hide-required-asterisk>
			<h2>胖虎到家 - 后台登录</h2>
			<el-form-item label="账号" prop="username">
				<el-input prefix-icon="el-icon-user" placeholder="请输入账号" v-model="loginForm.username"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="pwd">
				<el-input type="password" prefix-icon="el-icon-lock" placeholder="请输入密码"
					v-model="loginForm.pwd"></el-input>
			</el-form-item>
			<el-form-item label="">
				<el-button type="primary" @click="login">登录</el-button>
				<el-button type="primary" @click="toRegister">注册</el-button>
				<el-button @click="cancel">取消</el-button>
			</el-form-item>
		</el-form>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {
					username: '',
					pwd: ''
				},
				// 验证规则  对应的名字为标签中的  prop
				rules: {
					username: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur'
						},
						{
							min: 4,
							max: 20,
							message: '长度在4-20个字符',
							trigger: 'blur'
						}
					],
					pwd: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 5,
							message: '长度至少5个字符',
							trigger: 'blur'
						}
					]
				}
			}

		},
		methods: {
			login() {
				// this.$router.push('/main')
				// 先验证form表单是否满足验证规则，如果满足则调其中的方法
				//	validate 对表单中的数据进行验证
				this.$refs['loginForm'].validate((valid) => {
					//	满足验证规则然后验证账号密码是否正确
					if (valid) {
						// http ://43.143.190.87:8182/Login
						// 协议名://ip地址:端口号/请求名

						// this.$http.post(`/login?username=${this.loginForm.username}&pwd=${this.loginForm.pwd}`)
						this.$http({
							method:'post',
							// 调用单独的登录接口
							url:'http://10.10.18.156:8089/panghudaojiaBackend/user?op=login',
							params:{
								username:this.loginForm.username,
								pwd:this.loginForm.pwd
							}
						})
							.then(res => {
								console.log(res)
								if (res.data.status == 500) {
									this.$message({
										showClose: true,
										message: '用户名或密码错误!',
										type: 'error'
									});
								} else {
									this.$message({
										message:'登录成功',
										type:'success'
									})
									// 1.将登录成功的用户信息存储在sessionStorage中
									sessionStorage.setItem('userInfo', res.data.username)
									//	2.跳转页面
									this.$router.push('/main')
								}
							})
							.catch(e => {
								this.$message.error('接口异常')
							})
					} else {
						this.$message({
							showClose: true,
							message: '请输入正确的账号和密码！',
							type: 'error'
						});
						return false;
					}
				});
			},
			toRegister() {
				this.$router.push('/register')
			},
			cancel() {
				// 点击取消，重置表单内容及校验状态；
				this.$refs['loginForm'].resetFields();
			}
		},
	}
</script>
<!-- scoped： 代表当前的css样式，只作用于当前的组件中，而不是全局 -->
<style scoped>
	/* 设置整个背景图片 */
	.container {
		width: 100%;
		/* vh 视图高度  100% */
		height: 100vh;
		background-image: url(../assets/login_bg.jpg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		overflow: hidden;
	}

	.el-form {
		width: 450px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.8);
		margin: 200px auto;
		padding: 30px 50px;
	}

	h2 {
		text-align: center;
	}

	.el-form-item {
		border: 0px solid red;
	}

	.el-button {}
</style>